<template>
	<view class="container">
		<!-- 背景 -->
		<view class="bg">
			<image :src="getApartment.bj_url" mode=""></image>
		</view>
		<!-- 返回-->
		<view class="back">
			<image src="../../static/assets/back2.png" mode="" @click="back"></image>
		</view>
		<!-- 头部 -->
		<view class="top">
			<view class="logo">
				<image :src="getApartment.logo_url" mode=""></image>
			</view>
			<view class="content">
				<view class="title">{{getApartment.shop_name}}（北京南站店）</view>
				<view class="des">{{getApartment.sub_desc}}</view>
			</view>
		</view>
		<!-- tab栏 -->
		<view class="tab" id="tab1" v-bind:class="{'tab1':isScrolltop}">
			<block v-for="(item,index) in tablist" v-bind:key="item.id">
				<view class="tabitem" :class="{'active':currentTab==index}" @click="clicktoItem(index)">{{item.tabname}}</view>
			</block>
		</view>
		<!-- 全部房型 -->
		<view class="houselist" v-if="ishouselist">
			<block v-for="(item,index) in getApartment.house_list">
				<navigator :url="'../houseDetail/houseDetail?id='+encodeURIComponent(item.id)" class="listitem">
					<view class="houseimg">
						<image :src="item.house_main_image" mode=""></image>
					</view>
					<text class="price">￥{{item.month_rent}}</text>
					<view class="content">
						<text class="itemname">{{item.room_detail}}</text>
						<text class="concat">{{item.house_info_concat}}</text>
					</view>
				</navigator>
			</block>
		</view>
		<!-- 暂无房型 -->
		<view class="nothing" v-if="!ishouselist">
			暂无房型推荐
		</view>
		<!-- 公寓介绍 -->
		<view class="house_des">
			<text class="title">———— 公寓说 ————</text>
			<text class="content" v-if="isdes">
				{{getApartment.fx_res}}
			</text>
		</view>
		<view class="nothing" v-if="!isdes">
			暂无房源数据
		</view>
		<!-- tab栏2 -->
		<view class="tab tab2" >
			<block v-for="(item,index) in tablist2" v-bind:key="item.id">
				<view class="tabitem tabitem2" :class="{'active':currentTab2==index}" @click="currentTab2=index">{{item.tabname}}</view>
			</block>
		</view>
		<!-- tab对应内容 -->
		<view class="tab_content">
			<view class="textbox" v-for="(item,index) in tablist2" v-bind:key="item.id" v-if="currentTab2==index">
				<!-- <block v-for="items in item.data"> -->
					<text class="textitem" v-if="currentTab2==0">{{item.data}}</text>
					<text class="textitem" v-if="currentTab2==2">美食:{{item.data[0]}}</text>
					<text class="textitem" v-if="currentTab2==2">交通:{{item.data[1]}}</text>
					<text class="textitem" v-if="currentTab2==2">周边:{{item.data[2]}}</text>
					<text class="textitem" v-if="currentTab2==1">公交:{{item.data[0]}}</text>
					<text class="textitem" v-if="currentTab2==1">地铁:{{item.data[1]}}</text>
				<!-- </block> -->
			</view>
			<view class="address_img">
				<image :src="getApartment.shop_info.location_url" mode=""></image>
			</view>
		</view>
		<view class="serve_des">
			<text class="title">————服务保障————</text>
			<text class="content">{{getApartment.shop_info.commitment}}</text>
		</view>
		<!-- 暂无服务数据 -->
		<view class="nothing" v-if="!isserve">
			暂无数据
		</view>
		<view class="evaluation">
			<text class="title">————用户评价————</text>
			<text class="content">抱歉 暂无任何评价</text>
		</view>
	</view>
</template>

<script>
	import {gongyu_detail} from "../../data/apartment_detail.js"
	export default {
		data() {
			return {
				tablist:[
					{tabname:"全部房型",id:'0'},
					{tabname:"公寓介绍",id:'1'},
					{tabname:"用户点评",id:'2'},
				],
				tablist2:[
					{tabname:"地图",id:'00',data:['角门北路8号公寓']},
					{tabname:"交通",id:'11',data:['10号线(角门东站)，步行7分钟。 4号线\/大兴线(角门西站)，步行13分钟']},
					{tabname:"周边",id:'22',data:['玉林串串香、井格重庆老灶火锅、京味斋、金火勺东北菜、京虎门爆肚涮肉']},
				],
				arr:[0,1,2],
				currentTab:0,
				currentTab2:0,
				getApartmentIds:[],
				getindex:0,
				getApartment:{},
				swiperheight:0,
				isScrolltop:false,
				ishouselist:true,
				isdes:true,
				isserve:true,
				top:0
			}
		},
		methods: {
			// 返回上一页
			back(){
				uni.navigateBack();
			},
			//加载数据
			getdata(getid){
				this.getApartmentIds.forEach((item,index)=>{
					if(getid==item){
						// console.log('get',index);
						this.getindex=index;
					}
				})
				this.getApartment=gongyu_detail[this.getindex].result;
				console.log(this.getApartment)
				this.tablist2[0].data=this.getApartment.shop_info.address;
				this.tablist2[1].data[0]=this.getApartment.shop_info.traffic_desc.bus_desc;
				this.tablist2[1].data[1]=this.getApartment.shop_info.traffic_desc.subway_desc;
				this.tablist2[2].data[0]=this.getApartment.shop_info.near_desc.foods;
				this.tablist2[2].data[1]=this.getApartment.shop_info.near_desc.lives;
				this.tablist2[2].data[2]=this.getApartment.shop_info.near_desc.shops;
				// 判断是否有房型信息
				if(this.getApartment.house_list.length==0){
					this.ishouselist=false;
				}
				// 判断是否有介绍
				if(this.getApartment.fx_res.length==0){
					this.isdes=false;
				}
				// 判断是否有服务保障
				if(this.getApartment.shop_info.commitment==''){
					this.isserve=false;
				}
			},
			// 点击跳转到相应位置
			clicktoItem(index){
				this.currentTab=index;
				let _this=this;
				if(this.currentTab==0){
					// 获取房源盒子的top
					const query1=uni.createSelectorQuery().in(this);
					query1.select('#tab1').boundingClientRect((res)=>{
						// console.log(JSON.stringify(res));
						console.log(res.top);
						_this.top=res.top
					}).exec();
				}
				else if(this.currentTab==1){
					let query2=uni.createSelectorQuery();
					query2.select('.house_des').boundingClientRect((res)=>{
						_this.top=res.top
					}).exec();
				}
				else if(this.currentTab==2){
					let query3=uni.createSelectorQuery();
					query3.select('.evaluation').boundingClientRect((res)=>{
						_this.top=res.top
					}).exec();
				}
				uni.pageScrollTo({
					scrollTop:this.top
				})
			},
			// 获取盒子信息
			getposition(){
				// uni.getSystemInfo({
				// 	success:(res) =>{
				// 		console.log(res); //获取系统信息
				// 		let info=uni.createSelectorQuery().select('.tab2');//选择某个盒子
				// 		info.boundingClientRect(function(data){
				// 			console.log(data)//获取自身的元素				
				// 		}).exec();
						
				// 	}
				// })
				const query=uni.createSelectorQuery();
				query.select('.tab2').boundingClientRect();
				query.selectViewport().scrollOffset();
				query.exec(function(res){
					console.log(res)
				})
			}
		},
		onLoad(option){
			// 获取跳转携带参数
			// console.log(option.id)
			// this.getdata();
			gongyu_detail.forEach((item)=>{
				// console.log(item.result.fx_link.indexOf('='));
				// console.log(item.result.fx_link.length)
				let length=item.result.fx_link.length;
				let begin=item.result.fx_link.indexOf('=')+1;
				let id=item.result.fx_link.substring(begin,length);
				// console.log(id);
				this.getApartmentIds.push(id);
			})
			// console.log(this.getApartmentIds);
			this.getdata(option.id);
			// this.getposition();
		},
		mounted(){
			// this.clicktoItem(0)
		},
		onShow() {
			//  uni.getSystemInfo({
			//     success: (res)=> {
			// 		// console.log(res)
			//         let height=res.windowHeight-uni.upx2px(100) //获取系统信息，可使用窗口的高度
			//         this.swiperheight=height;
			//     }
			// });
		},
		// 滚动一定高度tab栏固定
		onPageScroll(res) {
			// console.log(res)
			// console.log(res.scrollTop)
			let getScrollTop=res.scrollTop;
			if(getScrollTop>=240){
				this.isScrolltop=true;
			}
			else{
				this.isScrolltop=false;
			}
		}
		
	}
</script>

<style lang="scss">
.container{
	width: 100%;
	height: 100%;
	position: relative;
	background-color: #eeeeee;
	color: #464547;
}
.bg{
	width: 100%;
	height: 480rpx;
	// z-index: -1;
	// position: fixed;
	// top: 0;
	// left: 0;
	// padding-top: 5%;
	image{
		width: 100%;
		height: 100%;
		opacity: 0.5;
	}
	
}
//返回
.back{
	width:100rpx;
	height: 100rpx;
	border-radius: 50%;
	overflow: hidden;
	top: 5%;
	left: 5%;
	position: fixed;
	background-color: #6A6DA9;
	z-index: 2;
	image{
		width: 100%;
		height: 100%;
	}
}
//头部
.top{
	width: 100%;
	height:220rpx;
	// margin-top: 220rpx;
	position: absolute;
	top: 220rpx;
	left: 0;
	padding-top: 20rpx;
	display: flex;
	align-items: center;
	.logo{
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			margin-left: 50rpx;
			margin-right: 20rpx;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
		}
	.content{
		width: 60%;
		z-index: 2;
		.title{
			color: #74787c;
			width: 100%;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			font-size: 18px;
			font-weight: bold;
		}
		.des{
			width: 100%;
			margin-bottom: 20rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			color: #FFFFFF;
		}
	}
}
// 导航栏
.tab{
	width: 100%;
	display: flex;
	// margin-top: 50rpx;
	background-color: #FFFFFF;
	.tabitem,.tabitem2{
		width: 33.3%;
		padding: 30rpx 0;
		text-align: center;
		background-color: #FFFFFF;
	}
	.active{
		background-color: #afb4db;
		color: #FFFFFF;
	}
}
.tab1{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 3;
}
.tab2{
	margin-top: 30rpx;
}
// 全部房型
// 没有数据
.nothing{
	width: 100%;
	padding: 100rpx 0;
	text-align: center;
	background-color: #FFFFFF;
	color: #bbbbbb;
}
.houselist{
	width: 100%;
	height: 100%;
	margin: 0 auto;
	// margin-top: 10rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #FFFFFF;
	padding-bottom: 20rpx;
	.listitem{
		width: 100%;
		height: 450rpx;
		position: relative;
		// border-bottom: 1px solid #cccccc;
		margin-top: 50rpx;
		padding-bottom: 10rpx;
		.price{
			display: block;
			position: absolute;
			bottom:10%;
			right: 5%;
			color: #6A6DA9;
			font-weight: bold;
		}
		.houseimg{
			width: 100%;
			height: 350rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.content{
			width: 100%;
			height:150rpx;
			color: #555555;
			display: flex;
			flex-direction: column;
			text{
				width: 90%;
				padding: 0 2%;
				margin-top: 15rpx;
			}
			.concat{
				margin-bottom: 15rpx;
			}
		}
	}
}
// 公寓介绍
.house_des{
	margin-top: 50rpx;
	// margin-bottom: 50rpx;
	width: 100%;
	color: #808080;
	background-color: #FFFFFF;
	padding-bottom: 50rpx;
	text{
		display: block;
	}
	.title{
		width: 100%;
		text-align: center;
		padding: 30rpx 0 30rpx 0;
		font-weight: bold;
	}
	.content{
		width: 90%;
		margin: 0 auto;
		line-height: 18px;
		color: #555555;
	}
}
// tab2对应内容
.tab_content{
	width: 100%;
	margin-bottom: 50rpx;
	background-color: #FFFFFF;
	.textbox{
		width: 90%;
		margin: 0 auto;
		padding: 50rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		.textitem{
			display: block;
			width: 95%;
			padding: 10rpx 0;
		}
	}
	.address_img{
		width: 100%;
		height: 360rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
}
// 服务介绍
.serve_des{
	width: 100%;
	// height: 150rpx;
	padding-bottom: 50rpx;
	color: #808080;
	background-color: #FFFFFF;
	text{
		display: block;
	}
	.title{
		width: 100%;
		text-align: center;
		padding: 30rpx 0 30rpx 0;
		font-weight: bold;
	}
	.content{
		width: 90%;
		margin: 0 auto;
		line-height: 18px;
		color: #555555;
	}
}
// 用户评价
.evaluation{
	width: 100%;
	// height: 150rpx;
	padding-bottom: 100rpx;
	color: #808080;
	margin-bottom: 50rpx;
	margin-top: 30rpx;
	background-color: #FFFFFF;
	text{
		display: block;
	}
	.title{
		width: 100%;
		text-align: center;
		padding: 30rpx 0 30rpx 0;
		font-weight: bold;
	}
	.content{
		width: 90%;
		margin: 0 auto;
		line-height: 18px;
		color: #555555;
		text-align: center;
	}
}
</style>
